<template>
  <div class="text-center pt-80">
    <img class="h-60" src="../assets/img/avatar1.png" alt="" />
    <h2 class="text-6xl">修改资料</h2>
  </div>
  <div class="px-20">
    <div class="py-8">真实姓名</div>
    <custom-input
      v-model="info.name"
      icon="icon-youxiang"
      placeholder="请输入账号"
    />
  </div>
  <div class="px-20">
    <div class="py-8">应聘岗位</div>
    <custom-input
      v-model="info.job"
      icon="icon-mimaguanli"
      placeholder="请输入应聘岗位"
    />
  </div>
  <div class="px-20">
    <div class="py-8">应聘岗位</div>
    <div class="upload-pdf">
      {{ percent == 100 ? "简历上传完毕" : "上传个人简历" }}
      <van-uploader accept="*" :after-read="handleUpload" />
      <van-progress
        v-show="progressShow"
        stroke-width="100%"
        color="#f2826a"
        :percentage="percent"
      />
    </div>
  </div>
  <div class="p-20">
    <van-button color="rgba(249, 115, 22)" block @click="handleSubmit"
      >提交资料</van-button
    >
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import Cloud from "leancloud-storage";
import { userUpdate } from "../api/user";
import { useUser } from "../store/user";
import { useRouter } from "vue-router";
const router = useRouter();
const user = useUser();
const info = reactive({
  name: "张三丰",
  job: "前端开发",
  resume: "",
});
const handleSubmit = () => {
  console.log(info);
  if (user.userInfo) {
    let { objectId, sessionToken } = user.userInfo;
    userUpdate(objectId as string, sessionToken as string, info).then(() => {
      //更新本地账号信息
      user.userInfo = {
        ...user.userInfo,
        ...info,
      };
      router.go(-1);
    });
  }
};

//简历上传
const percent = ref<number>(0);
const progressShow = ref<boolean>(false);
const getBase64 = function (
  img: any,
  callback: (arg: string | ArrayBuffer | null) => void
) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
};
//简历上传
const handleUpload = (arg: any) => {
  console.log(arg.file);
  progressShow.value = true;
  percent.value = 20;
  getBase64(arg.file, async (base64: string | ArrayBuffer | null) => {
    // console.log(base64);
    percent.value = 60;
    let cloudFile = new Cloud.File("resume.pdf", { base64 }); //构建leancloud资源
    percent.value = 80;
    let res = await cloudFile.save(); //保存
    percent.value = 100;
    info.resume = res.attributes.url;
    setTimeout(() => {
      progressShow.value = false;
    }, 1000);
    console.log(res);
  });
};
</script>

<style lang="scss" scoped>
.upload-pdf {
  height: 15rem;
  border: 1px dashed #fd7753;
  line-height: 15rem;
  text-align: center;
  background-color: rgba(253, 119, 83, 0.1);
  position: relative;
  .van-uploader {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
  :deep(.van-uploader__upload) {
    width: 100%;
  }
  .van-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}
</style>
